| 在vue中,解决papaparse把.csv转成json格式中文乱码问题,并把处理过程进行封装 | 您所在的位置：网站首页 › js解析csv文件 开源库 › 在vue中,解决papaparse把.csv转成json格式中文乱码问题,并把处理过程进行封装 |
在vue中,解决papaparse把.csv转成json格式中文乱码问题,并把处理过程进行封装
|
前后效果图: 二.解决的方法 识别编码,告诉papaparse的encoding属性 三.需要的插件jschardet 只能检测编码，不能把乱码转成原文 四.创建一个文件夹和文件 文件夹名: csv-arr 文件名: index 五.index.js的代码为: import jschardet from 'jschardet' import Papa from 'papaparse' /** * csv file to 2D arr * */ // 检查编码，引用了 jschardet function checkEncoding(base64Str) { // 这种方式得到的是一种二进制串 var str = atob(base64Str.split(';base64,')[1]) // console.log(str); // 要用二进制格式 var encoding = jschardet.detect(str) encoding = encoding.encoding // console.log( encoding ); if (encoding === 'windows-1252') { // 有时会识别错误（如UTF8的中文二字） encoding = 'ANSI' } return encoding } function csv(file) { return new Promise((resolve, reject) => { // let file = this.$refs.csvData.files[0] const fReader = new FileReader() fReader.readAsDataURL(file) fReader.onload = function(evt) { const data = evt.target.result // console.log( data ); const encoding = checkEncoding(data) // console.log(encoding); // 转换成二维数组，需要引入Papaparse.js Papa.parse(file, { encoding: encoding, complete: function(results) { // UTF8 \r\n与\n混用时有可能会出问题 // console.log(results) const res = results.data if (res[ res.length - 1 ] === '') { // 去除最后的空行 res.pop() } resolve(res) } }) } }) } export default { csv }六.在需要把.csv转成json的.vue文件中 import csv2arr from '@/assets/csv-arr' export default { methods: { csv() { csv2arr.csv(this.$refs.csvData.files[0]).then((res)=>{ console.log('我的数据', res) }) } } }另外(可不看): 要是不使用promise,如何将js回调函数中的数据返回给最外层函数？ 一个小例子,代码为: function getData(url,callback){ http.get(url,function(res){ var body=''; res.on('data',function(str){ body+=str; }); res.on('end',function(){ var result=JSON.parse(body); //将result返回到getData外面 callback && callback(result) }) }); } //调用 getData(url,function(data){ //你的操作 }) |
一.出现这类问题的原因 编码格式的问题,默认处理时utf8格式,但可能出现GBK,GB2312(我的就是)…等格式【本文地址】
公司简介
联系我们